<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>trocar.js</title>
<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"/>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.trocar.js"></script>
</head>
<body data-offset="50">
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<h1 class="page-title">trocar.js</h1>
			</div>
		</div>
	</div>

	<div class="container">
		<header>
			<h2>Example</h2>
		</header>

		<div class="row">
            <p class="text-focus" tabindex="-1">
			 I'm an example text editable when you focus.
            </p>
		</div>
        
        <div class="row">
            <p class="text-always" tabindex="-1">
                I'm an example text editable all the time with multiline. Paste content didn't get filtered.
            </p>
        </div>
	</div>
    
	<script>
	$('.text-focus').trocar({
		'on': 'focus',
		'off': 'blur',
        'endOnEnter': true,
        'filterPaste': true
	});
        
    $('.text-always').trocar({
		'on': 'always',
		'off': 'blur',
        'endOnEnter': false,
        'filterPaste': false
	});
	</script>
</body>
</html>